<template>
	<u-form class="common-content" :model="form" ref="uForm">
		<!-- 自定义导航 -->
		<u-navbar title-color="#fff" back-icon-color="#333333" :is-fixed="true" :is-back="false" >
			<!-- <view class="common-tabs-box"> -->
				<view class="slot-wrap">
					<view class="slot-wrap-left" @tap="back">
						<u-icon name="arrow-left"></u-icon>
					</view>
					<view class="slot-wrap-title">服务设置</view>
				</view>
			<!-- </view> -->
		</u-navbar>
		<!-- 主体 -->
		<view class="common-content-box container mb-30">
			<view class="common-msg-show">
				<view class="common-msg-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>缴费信息</text>
				</view>
				<view class="common-msg-row container">
					<view class="common-msg-row-items firstitem">
						<view class="label">在线咨询价格</view>
						<u-input v-model="form.consultPrice" :placeholder="placeholder" :type="type"
							:disabled="disabled" :custom-style="disabled ? inputStyle : inputStyle2" />
						<view class="val">
							元
						</view>
					</view>
					<view class="common-msg-row-items">
						<view class="label">预约挂号价格</view>
						<u-input v-model="form.registerPrice" :placeholder="placeholder" :type="type"
							:disabled="disabled" :custom-style="disabled ? inputStyle : inputStyle2" />
						<view class="val">
							元
						</view>
					</view>
				</view>
				<view class="common-msg-title">
					<image src="@/static/img/common/line.png" alt="" class="img"></image>
					<text>坐班设置</text>
					<text class="submit-text" @tap="toAdd" v-show="!disabled">+添加</text>
				</view>
				<!-- 坐诊设置内容 v-if="dataItem.list[0].times"-->
				<view class="common-msg-row2" v-for="(dataItem,dataIndex) in dataList" :key="dataIndex"
					v-if="dataItem.list[0].times.length > 0">
					<view class="common-msg-row2-items">
						<view class="label">{{dataItem.title || ''}}</view>
						<u-icon name="trash-fill" size="28" color="#999" @click="deleteSite(dataIndex)"
							v-show="!disabled"></u-icon>
					</view>
					<view class="scroll-view_H">
						<view class="u-grid">
							<view class="u-grid-item">
								<text>时间</text><text> / 星期</text>
							</view>
							<view v-for="(title,windex) in weekList" :key="windex" class="u-grid-item">
								<text class="text">
									{{ title || ''}}
								</text>
							</view>
						</view>
						<view class="u-grid" v-for="(listItem,listIndex) in dataItem.list" :key="listIndex">
							<view class="u-grid-item">
								<view class="text"
									v-for="(timeSlot,timeSlotIndex) in listItem.timeSlot ? listItem.timeSlot.split('~') : []"
									:key="timeSlotIndex" v-if="listItem.timeSlot">
									{{timeSlotIndex === 1 ? '~' : ''}}{{timeSlot}}
								</view>
							</view>
							<!-- status 1未审核 2 审核完 3未开放 -->
							<view @click="addPatientNum(dataIndex,listIndex,tIndex,t)"
								v-for="(t,tIndex) in listItem.times" :key="tIndex" class="u-grid-item"
								:class="[{'active': t.expertId === expertId && t.count != 0 },{'is-use':  t.expertId && t.expertId !== expertId || t.status == 3}]">
								<text class="text">
									<!-- {{t.status != 3 ? t.expertId && t.expertId !== expertId ? '占用' : t.count != 0 && t.status == 2 ||  t.count != 0 && t.newCount == 1  ? t.count : '' : '未开放' }} -->
									{{t.status != 3 ? t.expertId && t.expertId !== expertId ? '占用' : t.count != 0 ? t.count : '' : '未开放' }}
								</text>
								<!-- 	<text class="text" v-if="is">
								</text> -->
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="container">
			<!-- 通栏 -->
			<u-button @click="submit" :custom-style="buttonStyle" shape="circle" hover-class="none">
				{{disabled ? '修改' : '提交审核'}}
			</u-button>
		</view>
		<!-- 添加的 -->
		<u-modal v-model="changeNumShow" :title="title" :title-style="titleStyle" width="80%"
			:show-confirm-button="false" :content-style="contentStyle">
			<view class="common-model-content">
				<u-form-item class="mask-content">
					填写挂号数（个）
					<u-number-box v-model="num" :min="0"></u-number-box>
					<!-- <u-number-box v-model="value" @change="valChange"></u-number-box> -->
					<!-- <u-input type="number"  min="0" step="1"  v-model="num" placeholder="请输入数字" :clearable="false" :border="true" /> -->
					<text class="active-text" @tap="clearNum">清除</text>
				</u-form-item>
				<view class="common-model-button">
					<view :style="cancelStyle" @tap="closeModal">取消</view>
					<view :style="confirmStyle" @tap="confirmBtn">保存</view>
				</view>
			</view>
		</u-modal>
		<!-- 删除的 -->
		<u-modal v-model="isShow" :title="title" :title-style="titleStyle" width="80%" :show-confirm-button="false"
			:content-style="contentStyle">
			<view class="common-model-content">
				<rich-text :nodes="content"></rich-text>
				{{curTitle}}
				<view class="common-model-button">
					<view :style="cancelStyle" @tap="closeModal">取消</view>
					<view :style="confirmStyle" @tap="confirmBtn">{{confirmText}}</view>
				</view>
			</view>
		</u-modal>
		<!-- 提交确认 -->
		<u-modal v-model="isSubmitShow" :title="title" :title-style="titleStyle" width="80%"
			:show-confirm-button="false" :content-style="contentStyle">
			<view class="common-model-content">
				<rich-text :nodes="content2"></rich-text>
				<view class="common-model-button">
					<view :style="cancelStyle" @tap="closeModal">取消</view>
					<view :style="confirmStyle" @tap="confirmBtn">{{confirmText}}</view>
				</view>
			</view>
		</u-modal>
	</u-form>
</template>

<script>
	import {
		API
	} from "@/config/myApi.js";
	export default {
		data() {
			return {
				roomName: '',
				siteName: '',
				disabled: true,
				expertId: this.$store.state.expertId,
				placeholder: '请填写价格',
				type: 'number',
				form: {
					consultPrice: 0,
					registerPrice: 0,
				},
				num: 0,
				weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				dataList: uni.getStorageSync('allTimePeriods') || [],
				// 当前被选中数据
				dataIndex: null,
				listIndex: null,
				tIndex: null,
				curTitle: '', // 院区
				curSiteRoomId: '', // 场地
				curSiteTimeId: '', // 时间id
				curtimeSlot: '', // 时间段
				curList: [], // 当前已修改数据集合
				isNext: true,
				gridStyle: {
					width: '112rpx',
					height: '102rpx',
					background: '#FFCCCE',
					border: '1px solid #F4333C',
				},
				// button
				buttonStyle: {
					marginBottom: "30rpx",
					width: "100%",
					height: "90rpx",
					fontSize: "32rpx",
					color: "#fff",
					borderRadius: "45rpx",
					backgroundColor: "#F4333C",
				},
				// 价格输入框不禁用与禁用
				inputStyle: {
					background: '#f2f2f2',
					padding: '0 20rpx',
				},
				inputStyle2: {
					background: 'none',
					padding: '0 20rpx',
				},
				// 遮罩层
				changeNumShow: false,
				isShow: false, // 
				isSubmitShow: false, // 提交时的
				// 模态框
				title: "温馨提示",
				titleStyle: {
					fontWeight: 700
				},
				content: "确定删除这个诊室吗？",
				content2: "确定提交审核吗？",
				confirmText: "确定",
				// 内容样式
				contentStyle: {
					height: "60rpx",
					marginTop: "50rpx",
					marginBottom: "180rpx",
					color: "#666666",
					fontSize: "30rpx",
					fontWeight: "500",
					// lineHeight: "80rpx",
					textAlign: "center"
				},
				// 取消样式
				cancelStyle: {
					width: "32%",
					height: "80rpx",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#ECECEC",
					borderRadius: "40rpx",
				},
				// 确认样式
				confirmStyle: {
					width: "32%",
					height: "80rpx",
					color: "#fff",
					fontSize: "30rpx",
					fontWeight: "bold",
					lineHeight: "80rpx",
					backgroundColor: "#F4333C",
					borderRadius: "40rpx",
				},

			};
		},
		onLoad(options) {
			let data = uni.getStorageSync('allTimePeriods')
			if (data.length == 0) {
				console.log('onLoad', data);
				this.getDataList(this.expertId);
				return
			};
			this.form = data.form;
			this.dataList = data.data;
			let {
				curName,
				curSite,
				siteRoomId
			} = options;
			if (siteRoomId) {
				this.disabled = false;
				API.allTimePeriodsBySiteRoomId(siteRoomId).then(res => {
					if (res.code === 200) {
						let r = res.result.list;
						let title = curSite + '(' + curName + ')';
						console.log('新增诊室', r);
						if (r.length > 0) {
							let arr = this.dataList.filter((v, i) => {
								if (v.title === title) {
									// console.log('有的', v, i);
									if (v.list[0].times.length == 0) {
										this.dataList[i].list = r;
									} else {
										uni.showToast({
											title: "该诊室已存在",
											icon: "none"
										})
									}
									return v
								}
							})
							if (arr.length == 0) {
								this.dataList.push({
									list: res.result.list,
									title
								})
							}
						} else {
							uni.showToast({
								title: '该诊室暂未开放',
								icon: "none"
							})
						}

					};
				});
			};
		},
		// onHide() {
		// 	uni.removeStorageSync('allTimePeriods')
		// },
		methods: {
			back() {
				uni.redirectTo({
					url: "/pages/mine/setting/index"
				})
				uni.removeStorageSync('allTimePeriods');
			},
			// 获取数据
			getDataList(pram) {
				// 获取价格
				console.log('参数', pram);
				API.s_expertPrice(pram).then(res => {
					if (res.code === 200) {
						this.form = {
							consultPrice: res.result.consultPrice,
							registerPrice: res.result.registerPrice,
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					// console.log('price',res.result);
				});
				// 获取坐班信息
				API.s_allTimePeriods(pram).then(res => {
					if (res.code === 200) {
						this.dataList = res.result;
					} else {
						uni.showToast({
							title: res.message,
							icon: "none"
						})
					}
					console.log('坐班信息', this.dataList);
				})

			},
			// 去选择院区和场地
			toAdd() {
				let data = {
					data: this.dataList,
					form: this.form,
				}
				// console.log(data);
				uni.setStorageSync('allTimePeriods', data);
				uni.navigateTo({
					url: "/pages/site/site"
				})
			},
			// 添加数量弹出模态框
			addPatientNum(dataIndex, listIndex, tIndex, t) {
				if (!this.disabled) {
					if (t.expertId && t.expertId != this.expertId || t.status == 3) { // 被占用
						return
					}
					this.dataIndex = dataIndex; // 场地
					this.listIndex = listIndex; // 时间id
					this.tIndex = tIndex; // 时间段
					let count = this.dataList[this.dataIndex].list[this.listIndex].times[this.tIndex].count;
					if (count) {
						this.num = count * 1;
					} else {
						this.num = 0
					}
					this.changeNumShow = true;
				}

			},
			// 清除数量
			clearNum() {
				this.num = 0;
				console.log(this.num);
				// this.$forceUpdate()
			},
			// 删除
			deleteSite(dataIndex) {
				this.isShow = true
				this.dataIndex = dataIndex; // 场地
				this.curTitle = this.dataList[dataIndex].title
			},
			// 关闭模态框
			closeModal() {
				if (this.isShow) {
					this.isShow = false;
				}
				if (this.changeNumShow) {
					this.changeNumShow = false;
				}
				if (this.isSubmitShow) {
					this.isSubmitShow = false;
				}
			},
			// 提交审核
			submit() {
				if (this.disabled) {
					this.disabled = !this.disabled;
				} else {
					this.isSubmitShow = true;

				}

			},
			// 确认
			confirmBtn() {
				// 确认删除场地，如果删除了诊室，那么里面的times传【】值
				if (this.isShow) {
					this.isShow = false;
					let r = this.dataList[this.dataIndex].list;
					r.forEach(v => {
						v.times = []
					})
					// this.dataList.splice(this.dataIndex,1)
					console.log('删除后的数据r', r);
					console.log('删除后的数据', this.dataList);
				}
				// 确认保存
				if (this.changeNumShow) {
					console.log('num', this.num);
					if (!this.num && this.num != 0) {
						uni.showToast({
							title: "数据不能为空",
							icon: "none"
						})
						return
					};
					this.dataList[this.dataIndex].list[this.listIndex].times[this.tIndex].count = this.num;
					if (this.num != 0) {
						this.dataList[this.dataIndex].list[this.listIndex].times[this.tIndex].expertId = this.expertId;
					} else {
						this.dataList[this.dataIndex].list[this.listIndex].times[this.tIndex].expertId = null;
					}
					this.changeNumShow = false;

					console.log('现在展示的', this.dataList);
				}
				// 确认提交审核
				if (this.isSubmitShow) {
					this.isSubmitShow = false;
					let list = this.dataList.map(a => {
						let roomId = null;
						a.list.map(b => {
							roomId = b.siteRoomId
						});
						if (a.list[0].times.length === 0) {
							return {
								siteRoomId: roomId,
								times: []
							}
						} else {
							return {
								siteRoomId: roomId,
								times: a.list.map(b => {
									return {
										siteTimeId: b.siteTimeId,
										timeSlot: b.timeSlot,
										times: b.times,
										// .filter(c =>{
										// 	if(c.expertId == this.expertId){
										// 		return c
										// 	}
										// })
									}
								})
							}
						}

					})
					let pram = {
						consultPrice: this.form.consultPrice,
						registerPrice: this.form.registerPrice,
						list
					}
					console.log('提交审核的参数', pram)
					// 发起审核
					API.initiateAudit(pram).then(res => {
						console.log(res);
						if (res.code === 200) {
							// this.dataList.splice(this.dataIndex,1)
							uni.navigateTo({
								url: "/pages/common/submitSuccess"
							})
						} else {
							uni.showToast({
								title: res.message,
								icon: "none"
							})
						}
					}).catch(error => {
						uni.showToast({
							title: error,
							icon: "none"
						})
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/css/common-navbar.scss";

	.common-content-box {
		padding-top: 30rpx;
	}


	.common-msg-show {
		margin-top: 30rpx;

		.common-msg-title {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;

			>.img {
				width: 5rpx;
				height: 28rpx;
			}

			>text {
				font-size: 30rpx;
				font-weight: bold;
				color: #333333;
				margin-left: 10rpx;
			}

			.submit-text {
				flex: 1;
				color: #F4333C;
				text-align: right;
			}
		}

		.common-msg-row {
			margin-bottom: 40rpx;
			background-color: #fff;

			.firstitem {
				border: none;
			}

			&-items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 110rpx;
				border-top: 1rpx #E3E3E3 solid;
				font-size: 30rpx;

				.label {
					margin-right: 35rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #333333;
					flex: 1;
				}

				.val {
					display: flex;
					align-items: center;
					margin-left: 17rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;

				}

			}
		}

		.common-msg-row2 {
			width: 100%;
			background: #FFFFFF;
			border-radius: 14rpx;
			padding: 0 24rpx 40rpx;
			margin-bottom: 20rpx;

			&-items {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 82rpx;
				font-size: 30rpx;
			}

			.scroll-view_H {
				white-space: wrap;
				text-align: center;
				overflow-x: scroll;

				/deep/.u-grid {
					width: calc(112rpx * 8);
					display: flex;
					justify-content: space-between;
					align-items: center;

					.u-grid-item {
						border: 1px solid #edeceb;
						font-size: 24rpx;
						width: 112rpx;
						height: 102rpx;
						padding: 0;
						display: flex;
						justify-content: space-between;
						align-items: center;
						flex-wrap: wrap;

						& {
							border-right: none;
							border-bottom: none;
						}

						&:last-child {
							border-right: 1px solid #edeceb;
						}

						>.text {
							width: inherit;
							height: auto;

						}
					}

					&:last-child {
						.u-grid-item {
							border-bottom: 1px solid #edeceb;
						}
					}

					// 激活状态
					.active {
						// width: 100%;
						// height: 100%;
						color: #F4333C;
						background: #FFCCCE !important;
						border: 1rpx solid #F4333C !important;

					}

					// 被占用
					.is-use {
						// width: 100%;
						// height: 100%;
						color: #999999;
						background: #F5F5F5 !important;
						// border-bottom: 1rpx solid #E3E3E3;
					}
				}

			}

		}

	}

	// 添加的遮罩层
	.mask-content {
		display: flex;
		align-items: center;
		padding: 0 30rpx;

		.active-text {
			color: #F4333C;
			margin-left: 10rpx;
		}
	}
</style>
